import { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import { notFound } from "next/navigation";
import {
  ArrowLeft,
  ArrowRight,
  BarChart,
  Building,
  CheckCircle,
  Clock,
  Download,
  FileText,
  Quote,
  Share2,
  User,
  FileSpreadsheet,
  HeartPulse,
  LineChart,
  PieChart,
  Factory,
  DollarSign,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Separator } from "@/components/ui/separator";

// 复用案例研究数据
const caseStudies = [
  {
    id: "global-financial",
    title: "全球金融服务企业提升数据分析效率",
    excerpt: "一家领先的金融服务公司使用bgactor的分析代理将报告生成时间从数天缩短到几分钟，同时发现了之前被忽略的成本节约机会。",
    industry: "金融服务",
    icon: DollarSign,
    iconColor: "text-green-400",
    results: [
      { label: "效率提升", value: "35%" },
      { label: "成本节约", value: "$1.2M/年" },
      { label: "分析周期", value: "从5天到2小时" }
    ],
    image: "/images/case-studies/finance.jpg",
    featured: true,
    client: "全球金融服务公司",
    solution: "AnalyticsAgent",
    year: "2023",
    challenge: `
      <p>在金融行业，数据分析是决策过程中的关键部分，但往往会耗费大量时间和资源。这家全球金融服务公司面临以下挑战：</p>
      <ul>
        <li>报告生成周期长，通常需要5-7个工作日完成</li>
        <li>大量重复性任务占用分析师宝贵时间</li>
        <li>人工分析容易出现错误且难以扩展</li>
        <li>无法快速响应市场变化和突发事件</li>
        <li>数据资源闲置，未被充分利用</li>
      </ul>
      <p>该公司每月需要生成数十份复杂的财务分析报告，每份报告需要从多个数据源收集和整合数据，这包括市场数据、客户行为数据、交易数据以及监管信息。</p>
    `,
    solution: `
      <p>bgactor为该公司提供了一个定制的AnalyticsAgent解决方案，专门针对金融数据的特点和需求进行了优化：</p>
      <h3>自动化数据收集与整合</h3>
      <p>AnalyticsAgent能够自动连接到公司的各种数据源，包括内部数据库、市场数据提供商API以及监管报告系统，自动提取和整合所需数据。</p>
      <h3>智能分析与异常检测</h3>
      <p>代理利用机器学习算法分析历史数据模式，自动识别异常值和潜在风险，同时提供深入的原因分析。</p>
      <h3>自动报告生成</h3>
      <p>基于预定义的模板和动态生成的分析结果，代理能够自动创建专业的报告文档，包括图表、表格和关键见解摘要。</p>
      <h3>交互式查询与探索</h3>
      <p>分析师可以使用自然语言向代理询问特定问题，无需编写复杂的SQL查询或使用专业分析工具。</p>
    `,
    outcome: `
      <p>实施AnalyticsAgent后，该金融服务公司取得了显著的成果：</p>
      <ul>
        <li><strong>报告生成时间从平均5天减少到2小时</strong>，效率提升了95%</li>
        <li><strong>分析师可以将35%的工作时间</strong>从数据处理转移到高价值分析活动</li>
        <li><strong>每年节省了约120万美元</strong>的运营成本</li>
        <li><strong>准确性提高了18%</strong>，减少了人为错误</li>
        <li>发现了<strong>之前未被察觉的成本节约机会</strong>，价值超过300万美元</li>
        <li><strong>客户满意度提升了22%</strong>，主要归因于更快速准确的服务</li>
      </ul>
      <p>该公司现在能够在市场变化时快速生成分析，为决策者提供及时的见解，大大提高了业务灵活性和竞争力。</p>
    `,
    testimonial: {
      quote: "bgactor的AnalyticsAgent彻底改变了我们的数据分析流程。我们现在可以在几小时内完成以前需要一周的工作，并且发现了更多有价值的见解。这不仅是一种工具，它实际上成为了我们分析团队的数字成员。",
      author: "Sarah Chen",
      title: "数据分析主管",
      company: "全球金融服务公司"
    },
    implementation: `
      <h3>实施阶段</h3>
      <p>bgactor采用了一种分阶段的方法来部署AnalyticsAgent：</p>
      <ol>
        <li><strong>需求评估与数据审计</strong>（2周）：全面了解现有流程、数据源和关键挑战</li>
        <li><strong>定制与集成</strong>（4周）：根据具体需求定制代理功能，并与现有系统集成</li>
        <li><strong>试点项目</strong>（2周）：在特定部门进行受控测试和优化</li>
        <li><strong>全面部署与培训</strong>（3周）：向所有相关团队推广解决方案并提供培训</li>
        <li><strong>持续优化</strong>（持续）：基于用户反馈和业务需求不断改进代理能力</li>
      </ol>
      <p>整个实施过程在11周内完成，比原计划提前了2周，并且在预算范围内。</p>
    `,
    nextSteps: [
      "扩展代理功能，纳入更多预测分析和情景模拟能力",
      "与其他部门的AI代理系统集成，创建更全面的分析生态系统",
      "开发针对特定业务线的专用分析模块",
      "增强自然语言理解能力，支持更复杂的交互式查询"
    ]
  },
  {
    id: "manufacturing-giant",
    title: "制造业巨头通过预测性维护减少停机时间",
    excerpt: "一家制造业领导者部署了bgactor的供应链代理，通过预测性维护警报显著减少了计划外停机时间。",
    industry: "制造业",
    icon: Factory,
    iconColor: "text-blue-400",
    results: [
      { label: "停机时间减少", value: "42%" },
      { label: "维护成本降低", value: "$3.5M/年" },
      { label: "设备寿命延长", value: "平均15%" }
    ],
    image: "/images/case-studies/manufacturing.jpg",
    featured: true,
    client: "全球制造业领导企业",
    solution: "SupplyChainAgent",
    year: "2023",
    challenge: `
      <p>这家全球制造业领导企业在其多个生产设施中运营着上千台设备，面临以下挑战：</p>
      <ul>
        <li>计划外设备故障导致生产线停机，每小时损失高达25,000美元</li>
        <li>传统的定期维护方法无法准确预测何时需要维修</li>
        <li>过度维护导致不必要的停机和成本浪费</li>
        <li>备件库存管理不足，导致维修延迟</li>
        <li>全球供应链复杂性增加了维护挑战</li>
      </ul>
    `,
    solution: `
      <p>bgactor为该企业开发了一个综合性的SupplyChainAgent解决方案：</p>
      <h3>设备健康监测系统</h3>
      <p>部署了传感器网络，配合AI代理实时监测设备参数，包括温度、振动、声音和能耗等指标。</p>
      <h3>预测性维护分析</h3>
      <p>AI代理分析历史维护数据和实时传感器数据，预测潜在故障，提前安排维护。</p>
      <h3>智能库存管理</h3>
      <p>代理系统与库存管理系统集成，根据预测的维护需求自动优化备件库存，确保在需要时有适当的零部件可用。</p>
      <h3>维护工作流程优化</h3>
      <p>AI代理自动生成和分配维护工单，根据紧急程度、技能需求和资源可用性进行优先级排序。</p>
    `,
    outcome: `
      <p>实施SupplyChainAgent后，该制造企业取得了显著成果：</p>
      <ul>
        <li><strong>计划外停机时间减少了42%</strong>，年度生产损失减少约750万美元</li>
        <li><strong>维护成本降低了350万美元/年</strong>，主要通过减少过度维护和更高效的资源分配</li>
        <li><strong>关键设备的平均寿命延长了15%</strong>，减少了资本支出</li>
        <li><strong>维护人员效率提高了28%</strong>，同样规模的团队可以处理更多设备</li>
        <li><strong>备件库存水平降低了23%</strong>，同时提高了可用性</li>
      </ul>
      <p>该系统的投资回报期不到6个月，远超客户预期。</p>
    `,
    testimonial: {
      quote: "bgactor的SupplyChainAgent彻底改变了我们的维护策略。我们从被动响应故障转变为主动预防，不仅节省了大量成本，还提高了生产力和产品质量。该系统的预测能力令人印象深刻，经常在我们的技术人员能够察觉问题之前就提出警报。",
      author: "Michael Rodriguez",
      title: "运营卓越总监",
      company: "全球制造业领导企业"
    },
    implementation: `
      <h3>实施阶段</h3>
      <p>该项目分为以下几个关键阶段实施：</p>
      <ol>
        <li><strong>初始评估与传感器部署</strong>（6周）：评估现有设备状况，安装必要的传感器</li>
        <li><strong>数据收集与基线建立</strong>（8周）：收集初始数据并建立设备性能基线</li>
        <li><strong>AI模型训练与验证</strong>（4周）：使用历史数据和新收集的数据训练预测性维护模型</li>
        <li><strong>系统集成</strong>（6周）：将AI代理与现有ERP、MES和库存管理系统集成</li>
        <li><strong>试点部署</strong>（8周）：在一个工厂进行试点并根据反馈优化</li>
        <li><strong>全球推广</strong>（12个月）：分阶段在全球12个工厂部署系统</li>
      </ol>
    `,
    nextSteps: [
      "扩展AI代理功能至质量控制领域，预测产品质量问题",
      "增强与供应商系统的集成，实现更智能的供应链协作",
      "开发更先进的设备健康预测模型，进一步延长设备寿命",
      "扩展至更多工厂和设备类型"
    ]
  },
  {
    id: "healthcare-provider",
    title: "医疗保健提供商优化患者护理",
    excerpt: "一家大型医疗保健网络利用AI代理优化患者护理流程，改善患者体验并减轻医护人员的行政负担。",
    industry: "医疗保健",
    icon: HeartPulse,
    iconColor: "text-red-400",
    results: [
      { label: "护士行政工作减少", value: "27%" },
      { label: "患者满意度提高", value: "18%" },
      { label: "平均住院时间缩短", value: "1.2天" }
    ],
    image: "/images/case-studies/healthcare.jpg",
    featured: false,
    client: "区域医疗保健网络",
    solution: "PatientCareAgent",
    year: "2023"
  },
  {
    id: "ecommerce-platform",
    title: "电子商务平台提升客户服务质量",
    excerpt: "一家在线零售商通过实施bgactor的CustomerServiceAgent，显著提高了客户满意度和解决效率。",
    industry: "电子商务",
    icon: Building,
    iconColor: "text-purple-400",
    results: [
      { label: "客户满意度提升", value: "28%" },
      { label: "平均响应时间缩短", value: "62%" },
      { label: "一次解决率提高", value: "41%" }
    ],
    image: "/images/case-studies/ecommerce.jpg",
    featured: true,
    client: "领先电子商务平台",
    solution: "CustomerServiceAgent",
    year: "2023"
  },
  {
    id: "insurance-innovator",
    title: "保险公司通过AI代理加速理赔处理",
    excerpt: "一家创新型保险公司使用bgactor的ClaimsAgent自动化理赔流程，实现更快的处理时间和更高的客户满意度。",
    industry: "保险",
    icon: FileSpreadsheet,
    iconColor: "text-amber-400",
    results: [
      { label: "理赔处理时间缩短", value: "56%" },
      { label: "人工处理需求减少", value: "73%" },
      { label: "准确度提高", value: "14%" }
    ],
    image: "/images/case-studies/insurance.jpg",
    featured: false,
    client: "领先保险提供商",
    solution: "ClaimsAgent",
    year: "2023"
  },
  {
    id: "energy-efficiency",
    title: "能源公司优化电网管理",
    excerpt: "一家公用事业公司部署了bgactor的智能能源代理，优化电网管理，提高能源效率，降低运营成本。",
    industry: "能源",
    icon: LineChart,
    iconColor: "text-yellow-400",
    results: [
      { label: "电网效率提高", value: "18%" },
      { label: "预测准确度", value: "94%" },
      { label: "运营成本降低", value: "$4.3M/年" }
    ],
    image: "/images/case-studies/energy.jpg",
    featured: false,
    client: "区域能源提供商",
    solution: "EnergyOptimizationAgent",
    year: "2023"
  }
];

// 根据行业查找相关案例
function getRelatedCaseStudies(currentId: string, count: number = 3) {
  const currentCase = caseStudies.find(study => study.id === currentId);
  if (!currentCase) return [];
  
  return caseStudies
    .filter(study => study.id !== currentId && study.industry === currentCase.industry)
    .slice(0, count);
}

// 根据ID获取案例
function getCaseStudy(id: string) {
  return caseStudies.find(study => study.id === id);
}

// 动态生成元数据
export async function generateMetadata({ params }: { params: { id: string } }): Promise<Metadata> {
  const caseStudy = getCaseStudy(params.id);
  
  if (!caseStudy) {
    return {
      title: '案例研究 | bgactor AI Agents',
      description: '探索bgactor AI代理如何为不同行业的客户创造价值'
    };
  }
  
  return {
    title: `${caseStudy.title} | 案例研究 | bgactor AI Agents`,
    description: caseStudy.excerpt
  };
}

export default function CaseStudyPage({ params }: { params: { id: string } }) {
  const caseStudy = getCaseStudy(params.id);
  
  if (!caseStudy) {
    notFound();
  }
  
  const relatedCases = getRelatedCaseStudies(params.id);
  const CaseIcon = caseStudy.icon;
  
  return (
    <div className="flex flex-col min-h-screen bg-slate-950">
      {/* Hero Section */}
      <section className="w-full py-12 md:py-24 bg-gradient-to-r from-slate-900 to-indigo-950">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col space-y-8">
            <Link href="/case-studies" className="flex items-center text-[#50E3C2] hover:text-[#3AC4A5] mb-4 w-fit">
              <ArrowLeft className="mr-2 h-4 w-4" />
              返回所有案例研究
            </Link>
            
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
              <div className="space-y-4">
                <Badge className={`${caseStudy.iconColor} bg-slate-800`}>
                  {caseStudy.industry}
                </Badge>
                <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl text-white">
                  {caseStudy.title}
                </h1>
                <p className="text-xl text-zinc-300">
                  {caseStudy.excerpt}
                </p>
                <div className="flex flex-wrap gap-6 pt-4">
                  <div className="flex items-center text-zinc-400">
                    <Building className="h-5 w-5 mr-2" />
                    <span>{caseStudy.client}</span>
                  </div>
                  <div className="flex items-center text-zinc-400">
                    <Bot className="h-5 w-5 mr-2" />
                    <span>{caseStudy.solution}</span>
                  </div>
                  <div className="flex items-center text-zinc-400">
                    <Clock className="h-5 w-5 mr-2" />
                    <span>{caseStudy.year}</span>
                  </div>
                </div>
              </div>
              <div className="bg-slate-800/50 rounded-xl p-10 flex items-center justify-center">
                <CaseIcon className={`h-32 w-32 ${caseStudy.iconColor}`} />
              </div>
            </div>
          </div>
        </div>
      </section>
      
      {/* Results Summary */}
      <section className="w-full py-8 md:py-12 bg-slate-950">
        <div className="container px-4 md:px-6">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {caseStudy.results.map((result, index) => (
              <Card key={index} className="bg-slate-900/50 border-slate-800">
                <CardHeader className="pb-2">
                  <p className="text-zinc-400 text-sm">{result.label}</p>
                  <CardTitle className="text-[#50E3C2] text-3xl md:text-4xl">
                    {result.value}
                  </CardTitle>
                </CardHeader>
              </Card>
            ))}
          </div>
        </div>
      </section>
      
      {/* Case Study Content */}
      <section className="w-full py-12 md:py-24 bg-slate-950">
        <div className="container px-4 md:px-6">
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
            <div className="lg:col-span-2">
              {/* Challenge */}
              <div className="mb-12">
                <h2 className="text-2xl font-bold text-white mb-4">
                  <span className="text-[#50E3C2] mr-2">01</span>
                  挑战
                </h2>
                <div className="prose prose-invert max-w-none" 
                  dangerouslySetInnerHTML={{ __html: caseStudy.challenge || '' }} />
              </div>
              
              {/* Solution */}
              <div className="mb-12">
                <h2 className="text-2xl font-bold text-white mb-4">
                  <span className="text-[#50E3C2] mr-2">02</span>
                  解决方案
                </h2>
                <div className="prose prose-invert max-w-none"
                  dangerouslySetInnerHTML={{ __html: caseStudy.solution || '' }} />
              </div>
              
              {/* Outcome */}
              <div className="mb-12">
                <h2 className="text-2xl font-bold text-white mb-4">
                  <span className="text-[#50E3C2] mr-2">03</span>
                  成果
                </h2>
                <div className="prose prose-invert max-w-none"
                  dangerouslySetInnerHTML={{ __html: caseStudy.outcome || '' }} />
              </div>
              
              {/* Implementation */}
              {caseStudy.implementation && (
                <div className="mb-12">
                  <h2 className="text-2xl font-bold text-white mb-4">
                    <span className="text-[#50E3C2] mr-2">04</span>
                    实施过程
                  </h2>
                  <div className="prose prose-invert max-w-none"
                    dangerouslySetInnerHTML={{ __html: caseStudy.implementation }} />
                </div>
              )}
            </div>
            
            <div className="space-y-8">
              {/* Client Quote */}
              {caseStudy.testimonial && (
                <Card className="bg-indigo-900/30 border-indigo-800">
                  <CardHeader>
                    <Quote className="h-8 w-8 text-[#50E3C2] mb-2" />
                    <CardDescription className="text-lg text-white italic">
                      "{caseStudy.testimonial.quote}"
                    </CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="flex items-center space-x-3 mt-4">
                      <div className="w-10 h-10 rounded-full bg-slate-700 flex items-center justify-center">
                        <User className="h-5 w-5 text-[#50E3C2]" />
                      </div>
                      <div>
                        <p className="text-white font-medium">{caseStudy.testimonial.author}</p>
                        <p className="text-zinc-400 text-sm">{caseStudy.testimonial.title}, {caseStudy.testimonial.company}</p>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              )}
              
              {/* Resources */}
              <Card className="bg-slate-900/50 border-slate-800">
                <CardHeader>
                  <CardTitle className="text-white">相关资源</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <Button variant="outline" className="w-full justify-start text-zinc-300 border-slate-700" asChild>
                    <Link href="#">
                      <Download className="mr-2 h-4 w-4" />
                      完整案例研究 PDF
                    </Link>
                  </Button>
                  <Button variant="outline" className="w-full justify-start text-zinc-300 border-slate-700" asChild>
                    <Link href="#">
                      <FileText className="mr-2 h-4 w-4" />
                      技术白皮书
                    </Link>
                  </Button>
                  <Button variant="outline" className="w-full justify-start text-zinc-300 border-slate-700" asChild>
                    <Link href="#">
                      <Share2 className="mr-2 h-4 w-4" />
                      分享这个案例
                    </Link>
                  </Button>
                </CardContent>
              </Card>
              
              {/* Next Steps */}
              {caseStudy.nextSteps && (
                <Card className="bg-slate-900/50 border-slate-800">
                  <CardHeader>
                    <CardTitle className="text-white">未来发展方向</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <ul className="space-y-3">
                      {caseStudy.nextSteps.map((step, index) => (
                        <li key={index} className="flex items-start">
                          <CheckCircle className="h-5 w-5 mr-2 text-[#50E3C2] shrink-0 mt-0.5" />
                          <span className="text-zinc-300">{step}</span>
                        </li>
                      ))}
                    </ul>
                  </CardContent>
                </Card>
              )}
            </div>
          </div>
        </div>
      </section>
      
      {/* Related Case Studies */}
      {relatedCases.length > 0 && (
        <section className="w-full py-12 md:py-24 bg-gradient-to-b from-slate-950 to-slate-900">
          <div className="container px-4 md:px-6">
            <div className="flex flex-col items-center space-y-4 text-center mb-10">
              <div className="space-y-2">
                <h2 className="text-3xl font-bold text-white">相关案例研究</h2>
                <p className="mx-auto max-w-[700px] text-zinc-400 md:text-lg">
                  浏览更多 {caseStudy.industry} 行业的成功案例
                </p>
              </div>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              {relatedCases.map((study) => (
                <Card 
                  key={study.id} 
                  className="bg-slate-900/50 border-slate-800 overflow-hidden hover:border-[#50E3C2]/50 transition-colors"
                >
                  <div className="aspect-video relative bg-slate-800/50">
                    <div className="flex items-center justify-center h-full bg-gradient-to-br from-indigo-900/30 to-indigo-800/10">
                      <study.icon className={`h-16 w-16 ${study.iconColor} opacity-30`} />
                    </div>
                  </div>
                  <CardHeader>
                    <div className="flex justify-between items-center mb-2">
                      <Badge className="bg-indigo-900 hover:bg-indigo-800">
                        {study.industry}
                      </Badge>
                    </div>
                    <CardTitle className="text-white">{study.title}</CardTitle>
                    <CardDescription className="text-zinc-400">
                      {study.excerpt}
                    </CardDescription>
                  </CardHeader>
                  <CardFooter className="border-t border-slate-800 pt-4">
                    <Link 
                      href={`/case-studies/${study.id}`}
                      className="text-[#50E3C2] hover:text-[#3AC4A5] flex items-center text-sm"
                    >
                      查看案例研究
                      <ArrowRight className="ml-1 h-4 w-4" />
                    </Link>
                  </CardFooter>
                </Card>
              ))}
            </div>
          </div>
        </section>
      )}
      
      {/* CTA Section */}
      <section className="w-full py-12 md:py-24 bg-gradient-to-r from-indigo-900 to-indigo-950">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center space-y-4 text-center">
            <div className="space-y-2">
              <h2 className="text-3xl font-bold text-white">想了解bgactor如何帮助您的企业？</h2>
              <p className="mx-auto max-w-[700px] text-zinc-200 md:text-xl">
                安排一次免费咨询，了解我们的AI代理如何为您的行业提供解决方案。
              </p>
            </div>
            <div className="flex flex-col sm:flex-row gap-4 mt-6">
              <Button asChild size="lg" className="bg-[#50E3C2] text-slate-900 hover:bg-[#3AC4A5]">
                <Link href="/demo">
                  请求演示
                </Link>
              </Button>
              <Button asChild variant="outline" size="lg" className="border-white text-white hover:bg-white/10">
                <Link href="/contact">
                  联系销售团队
                </Link>
              </Button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

// 添加缺失的组件定义
function Bot(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M12 8V4H8" />
      <rect width="16" height="12" x="4" y="8" rx="2" />
      <path d="M2 14h2" />
      <path d="M20 14h2" />
      <path d="M15 13v2" />
      <path d="M9 13v2" />
    </svg>
  );
} 